<template>
	<view class="container">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-input :customStyle="customStyle" v-model="form.account" placeholder="账号/手机号/邮箱" placeholder-style="color:#d8d8d8"/>
				<u-line></u-line>
				<u-input :customStyle="customStyle" v-model="form.password" type="password" placeholder="密码" placeholder-style="color:#d8d8d8" maxlength="12"/>
				<u-line></u-line>
			</u-form>
			<u-button class="custom-style" type="primary" :disabled="form.password && form.account ? false : true" @click="doLogin">登录</u-button>
		</view>
		<view class="footer-text">
			<view @click="forget">忘记密码</view>
			<view @click="register">新用户注册</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
import { api } from '../../api/api';
import { myRequest } from '../../util/api';


export default {
	data() {
		return {
			form: {
				account: 'admin',
				password: '123456'
			},
			loading: false,
			customStyle: {
				color: 'white'
			}
		};
	},
	methods: {
		async doLogin() {
			let account = this.form.account;
			let password = this.form.password
			
			const response = await myRequest({
				url: api.login,
				method: 'POST',
				data: {
					account: account,
					password: password,
				},
				success: (res) => {
					if (res.data.code == 200 && res.data.httpCode == 200){
						// 保存用户信息到本地 
						var userInfo = res.data.data.info;
						var token = res.data.data.accessToken;
						uni.setStorageSync('_user_info',userInfo)
						uni.setStorageSync('_token',token)
						
						// 提交 mutation 更新用户信息和 token
						this.$store.commit('updateUserAndToken', { userInfo, token });
						
						// 登录成功跳转至首页 
						uni.reLaunch({
							url: '/pages/home/home'
						});
					}
				}
			});
		},
		
		// 跳转注册页面
		register() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		
		// 忘记密码
		forget() {
			this.$refs.uToast.show({
				title: '这边建议重新注册☺️',
				position: 'bottom'
			})
		}
	},
	onReady() {
		
	}
};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column; // 垂直排列子元素
		align-items: center; // 水平居中
		height: 100vh;
		padding-top: 600rpx;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}; 
		background-image: url('/static/bgi/loginbg.jpg');
		background-size: cover;
		background-position: center;
	}
	.container::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.3); /* 黑色蒙版，透明度为0.3 */
	  z-index: 1; /* 确保蒙版在背景图片上方 */
	}
	.content {
		z-index: 2;
		width: 600rpx;
	}
	
	.footer-text{
		z-index: 3;
		width: 600rpx;
		height: 40rpx;
		font-size: 16px;
		align-items: center;
		color: #2979ff;
		display: flex;
		justify-content: space-between; /* 或者 space-around */
	}
	
	.custom-style{
		background-color: rgb(37, 171, 224);
		width: 100%;
		margin-top: 20rpx;
	}
</style>
